<script setup lang="ts">
import { ref, isRef, shallowRef } from "vue";
import type { Ref } from "vue";

type Info = { name: string; age: number };

const msg = ref<string>("Hello, 世界");

// const info = ref({ name: "张三", age: 18 });
// const info = ref<Info>({ name: "张三", age: 18 });
const info: Ref<Info> = ref({ name: "张三", age: 18 });

const info1 = shallowRef({ name: "王五", age: 20 });

const foo = "bar";

// 引用dom，变量名必须和元素的 `ref="命名"` 一致，参数为空
const dom = ref<HTMLDivElement>();

const changeMsg = () => {
  msg.value = "你好，World🌏";
};
const changeInfo = () => {
  // info.value.name = "李四";
  info.value = { ...info.value, name: "李四" };
};
const changeInfo1 = () => {
  info1.value.name = "赵六";
  // info1.value = { ...info1.value, name: "赵六" };
};

const getDomText = () => {
  console.log(dom.value?.innerText);
};

console.log(isRef(msg), isRef(info), isRef(foo));
</script>

<template>
  <div>字符串：{{ msg }} <button @click="changeMsg">修改</button></div>
  <div>
    对象（深层ref）{{ info }}
    <button @click="changeInfo">修改</button>
  </div>
  <div>
    对象（浅层ref）{{ info1 }}
    <button @click="changeInfo1">修改</button>
  </div>
  <div style="color: red">
    ref 和 shallowRef 不能同时使用，否则 shallowRef 会被 ref 影响
  </div>
  <div ref="dom">ref可以引用dom</div>
  <button @click="getDomText">获取DOM文本</button>
</template>

<style scoped></style>
